<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        #root { border: 2px solid blue ;}
        .welcome { margin: 15px ; border: 2px solid gray ; min-height: 10px; }
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <h3>使用插槽向子组件分发内容</h3>

    <div id="root">
        <kaifamiao-welcome class="welcome">
            <p>热烈欢迎瑞斯棒姜先生来到云创动力</p>
        </kaifamiao-welcome>
        <hr>
        <kaifamiao-welcome class="welcome">
            <p>热烈欢迎 {{ name }}</p>
        </kaifamiao-welcome>
        <hr>
        <kaifamiao-welcome class="welcome" />
    </div>

    <script src="vue.global.js"></script>

    <script>

        const welcome = {
            template: `<div>
                          <slot>
                            <p>热烈欢迎</p>
                          </slot>
                       </div>`
        }

        const options = {
            data(){
                return {
                    name: 'Resp Jone'
                }
            },
            components: {
                'kaifamiao-welcome': welcome
            }
        }
        const app = Vue.createApp(options);
        const root = app.mount('#root');
    </script>
    
</body>
</html>